(function (root, factory) {
  typeof define === 'function' && define.amd ? define([], factory) :
  root.waterMark = factory();
}(this, function () { 'use strict';

  var waterMark = function(options) {
    const { applyScale = false, width = 200, height = 150, fontSize = 20, lineHeight, rotate = -30, text = String(Date.now()), color = "#ddd" } = options || {}
    const canvas = document.createElement('canvas');
    const devicePixelRatio = applyScale && window.devicePixelRatio || 1;
    const logicWidth = width * devicePixelRatio;
    const logicHeight = height * devicePixelRatio;
    const logicLineHeight = lineHeight * devicePixelRatio;
    const logicFontSize = fontSize * devicePixelRatio;
    canvas.height = logicHeight;
    canvas.width = logicWidth;
    const ctx = canvas.getContext('2d');
    ctx.textBaseline = 'top';
    ctx.font = `${logicFontSize}px sans-serif`;
    ctx.translate(15 * devicePixelRatio, logicHeight * 0.6);
    ctx.rotate(rotate * Math.PI / 180);
    ctx.fillStyle = color;
    const textArr = text.split("  "); //两个空白表示换行
    textArr.forEach((str, i) => {
      ctx.fillText(str, 0, i * (logicLineHeight || logicFontSize * 1.2));
    })

    return {
      dom: function() {
        const divELem = document.createElement('div');
        divELem.style.backgroundImage = `url(${canvas.toDataURL()})`;
        divELem.style.backgroundRepeat = 'repeat';
        divELem.style.position = 'fixed';
        divELem.style.top = 0;
        divELem.style.left = 0;
        divELem.style.right = 0;
        divELem.style.bottom = 0;
        divELem.style.opacity = 0.5;
        divELem.style.pointerEvents = 'none';
        return divELem;
      },
      dataUrl: function() {
        return canvas.toDataURL();
      }
    }
  }

  return waterMark

}))
